<template>
  <div>
    <el-dialog
      title="数据处理"
      :close-on-click-modal="false"
      class="jsbos-dialog jsbos-dialog_center form-script-dialog"
      lock-scroll
      append-to-body
      v-bind="$attrs"
      width="800px"
      :modal-append-to-body="false"
      v-on="$listeners"
      @open="onOpen"
    >
      <div class="btn dataFormat" style="">
        <div>
          <el-button
            v-for="(item, index) in formatList"
            :key="index"
            @click="formatSample(item)"
          >
            {{ item.name }}
          </el-button>
          <el-button
            v-if="formatTotal > 5"
            type="text"
            @click="moreFormatSample"
            >更多</el-button
          >
        </div>
        <div>
          <el-button
            type="text"
            icon="el-icon-setting"
            @click="moreFormatSample"
            >管理</el-button
          >
        </div>
      </div>

      <div class="form-script-dialog-body">
        <div class="right-main">
          <div class="codeEditor">
            <JSBOSCodeEditor
              v-model="text"
              :options="options"
              ref="CodeEditor"
            />
          </div>
          <div class="tips">
            <p>支持JavaScript的脚本，参考编写脚本API</p>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">{{
          $t("common.cancelButton")
        }}</el-button>
        <el-button type="primary" @click="onClose()">{{
          $t("common.confirmButton")
        }}</el-button>
      </span>
    </el-dialog>
    <FormatList
      v-if="formatSampleVisible"
      :visible.sync="formatSampleVisible"
      @updateScript="formatSample"
    ></FormatList>
  </div>
</template>

<script>
import JSBOSCodeEditor from "@/components/jsbos-editor/monaco";
import FormatList from "./FormatList";
import request from "@/utils/request";

export default {
  components: { JSBOSCodeEditor, FormatList },
  props: ["value"],
  data() {
    return {
      text: "",
      options: {
        language: "javascript",
      },
      formatSampleVisible: false,
      formatTotal: 0,
      formatList: [],
    };
  },
  created() {
    this.getDataFormatList();
  },
  methods: {
    moban() {
      console.log("this.text", this.text);
      this.text = `(data) =>  {
        let obj = {
          dataList: [],
          xData: [],
        }
        // 处理数据逻辑,图表数据处理
        data.forEach(item => {
            obj.xData.push(item.name)
            obj.dataList[0].data.push({
              name: item.name,
              value: item.value,
            })
        })
        // 返回所需的数据
        return obj
      }`;
      this.$nextTick(() => {
        this.$refs.CodeEditor.changeEditor({
          value: this.text,
          options: this.options,
        });
      });
    },
    moban2() {
      this.text = `(data) => {
        let obj = {
          dataList: [],
          xData: [],
        }
        // 处理数据逻辑,图表数据处理
        data.forEach(item => {
            obj.xData.push(item.name)
            obj.dataList[0].data.push(item.value)
        })
        // 返回所需的数据
        return obj
      }`;
      this.$nextTick(() => {
        this.$refs.CodeEditor.changeEditor({
          value: this.text,
          options: this.options,
        });
      });
    },
    getDataFormatList() {
      let listQuery = {
        currentPage: 1,
        pageSize: 5,
        sort: "asc",
        sidx: "",
      };
      request({
        url: `/api/system/BaseDataInterfaceFormat/getList`,
        method: "post",
        data: listQuery,
      }).then((res) => {
        var _list = [];
        for (let i = 0; i < res.data.list.length; i++) {
          let _data = res.data.list[i];
          _list.push(_data);
        }
        this.formatList = _list;
        this.formatTotal = res.data.pagination.total;
      });
    },
    formatSample(item) {
      console.log(item, "00000");
      this.$nextTick(() => {
        this.formatSampleVisible = false;
        this.$refs.CodeEditor.changeEditor({
          value: item.dataFormat,
          options: this.options,
        });
      });
    },
    moreFormatSample() {
      this.$nextTick(() => {
        this.formatSampleVisible = true;
      });
    },
    onOpen() {
      this.text = this.value;
      this.$nextTick(() => {
        this.$refs.CodeEditor.changeEditor({
          value: this.text,
          options: this.options,
        });
      });
    },
    onClose() {
      this.$emit("updateScript", this.text);
      this.closeDialog();
    },
    closeDialog() {
      this.$emit("update:visible", false);
    },
  },
};
</script>
<style lang="scss">
.dataFormat {
  display: flex;
  justify-content: space-between;
}

.btn {
  height: 80px;
  align-items: center;
  display: flex;
  // justify-content: space-between;
}
</style>
